<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor); height: 600px;">
    <!-- playground-fold-end -->

    <ui5-notification-list>
        <ui5-li-notification-group title-text="Orders" >
            <ui5-li-notification show-close
                importance="Important"
                title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
                state="Positive">
                <ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
                <span slot="footnotes">Office Notifications</span>
                <span slot="footnotes">3 Days</span>
                <ui5-menu slot="menu">
					<ui5-menu-item icon="accept" text="Accept"></ui5-menu-item>
					<ui5-menu-item icon="message-error" text="Reject"></ui5-menu-item>
				</ui5-menu>
                And with a very long description - Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
                dolor,
                nec elementum lectus turpis at nunc.
            </ui5-li-notification>
            <ui5-li-notification show-close
                title-text="New order (#2526) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
                state="Critical">
                <ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
                <span slot="footnotes">Office Notifications</span>
                <span slot="footnotes">3 Days</span>
                <ui5-menu slot="menu">
                    <ui5-menu-item icon="message-error" text="Reject"></ui5-menu-item>
					<ui5-menu-item icon="accept" text="Accept"></ui5-menu-item>
				</ui5-menu>
                And with a very long description - Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
                dolor,
                nec elementum lectus turpis at nunc.
            </ui5-li-notification>
        </ui5-li-notification-group>
        <ui5-li-notification-group title-text="Deliveries" collapsed>
            <ui5-li-notification show-close
                title-text="New Delivery (#2900) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
                state="Information">
                <ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
                <span slot="footnotes">Office Notifications</span>
                <span slot="footnotes">3 Days</span>
                <ui5-menu slot="menu">
					<ui5-menu-item icon="accept" text="Accept"></ui5-menu-item>
				</ui5-menu>
                And with a very long description - Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
                dolor,
                nec elementum lectus turpis at nunc.
            </ui5-li-notification>

            <ui5-li-notification show-close
                title-text="New Delivery (#29001) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
                state="None">
                <ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
                <span slot="footnotes">Office Notifications</span>
                <span slot="footnotes">3 Days</span>
                <ui5-menu slot="menu">
					<ui5-menu-item icon="accept" text="Accept"></ui5-menu-item>
				</ui5-menu>
                And with a very long description - Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
                dolor,
                nec elementum lectus turpis at nunc.
            </ui5-li-notification>
        </ui5-li-notification-group>

        <ui5-li-notification-group collapsed
            title-text="Meetings With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.">
            <ui5-li-notification show-close title-text="New meeting at Building (#35001)" state="Positive" read>
                <ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
                <span slot="footnotes">Office Notifications</span>
                <span slot="footnotes">3 Days</span>
                And with a very long description  - Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
                dolor,
                nec elementum lectus turpis at nunc.
            </ui5-li-notification>

            <ui5-li-notification show-close title-text="New meeting at Building (#35001)" state="Information" read>
                <ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
                <span slot="footnotes">Office Notifications</span>
                <span slot="footnotes">3 Days</span>
                And with a very long description - Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula
                dolor,
                nec elementum lectus turpis at nunc.
            </ui5-li-notification>
        </ui5-li-notification-group>
    </ui5-notification-list>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
